import React, { useState, useMemo } from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { getViewHistory } from 'utils/playLocal'
import { formatDate, getPicUrl } from 'utils/index'
const tabs = ['历史记录', '我的投稿']
function History(props) {
    const {} = props
    const [tabIndex, setTabIndex] = useState(0)
    const [historys] = useState(() => getViewHistory())
    const getDateKey = (timestamp) => {
        const currentTime = new Date()
        const dateTime = new Date(timestamp)
        if (
            currentTime.getFullYear() === dateTime.getFullYear() &&
            currentTime.getMonth() === dateTime.getMonth()
        ) {
            const diffDate = currentTime.getDate() - dateTime.getDate()
            switch (diffDate) {
                case 0:
                    return '今天'
                case 1:
                    return '昨天'
                case 2:
                    return '前天'
                default:
                    return '更早'
            }
        } else {
            return '更早'
        }
    }
    const viewHistory = useMemo(() => {
        let temp = historys.sort((a, b) => b.viewAt - a.viewAt)
        const historyMap = new Map()
        temp.forEach((history) => {
            const key = getDateKey(history.viewAt)
            let histories = historyMap.get(key)
            if (histories) {
                histories.push(history)
            } else {
                histories = []
                histories.push(history)
                historyMap.set(key, histories)
            }
        })
        return [...historyMap] || []
    }, [historys])

    const getTime = (timestamp) => {
        const currentTime = new Date()
        const dateTime = new Date(timestamp)
        if (
            currentTime.getFullYear() === dateTime.getFullYear() &&
            currentTime.getMonth() === dateTime.getMonth()
        ) {
            const diffDate = currentTime.getDate() - dateTime.getDate()
            switch (diffDate) {
                case 0:
                    return '今天 ' + formatDate(dateTime, 'hh:mm')
                case 1:
                    return '昨天 ' + formatDate(dateTime, 'hh:mm')
                case 2:
                    return '前天 ' + formatDate(dateTime, 'hh:mm')
                default:
                    return formatDate(dateTime, 'yyyy-MM-dd hh:mm')
            }
        } else {
            return formatDate(dateTime, 'yyyy-MM-dd hh:mm')
        }
    }
    console.log(viewHistory)

    return (
        <div className="his">
            <Helmet>
                <title>个人空间</title>
            </Helmet>
            <div className="his-tab">
                {tabs.map((e, i) => (
                    <div
                        onClick={() => {
                            setTabIndex(i)
                        }}
                        className={classnames('tab-item', { current: tabIndex == i })}
                    >
                        {e}
                    </div>
                ))}
            </div>
            <div className="">
                {viewHistory.map((e, i) => (
                    <div key={e[0]} className="his-card">
                        <div className="item  col-hui l">{e[0]}</div>
                        {e[1].map((history) => (
                            <a key={history.aId} href={'/video/av' + history.aId}>
                                <div className="flex middle item">
                                    <img
                                        src={getPicUrl(history.pic, '@480w_300h')}
                                        className="his-pic"
                                    />
                                    <div className="cell-main">
                                        <div className="his-title l">{history.title}</div>
                                        <div className="m col-hui">{getTime(history.viewAt)}</div>
                                    </div>
                                </div>
                            </a>
                        ))}
                    </div>
                ))}
            </div>
        </div>
    )
}

export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(History)
